<template>
    <view>
        <view class="w100 pl-10 pr-10">
            <uni-card>
                <view class="inforClass"> 任务信息 </view>
                <view class="rowsb rowsm mt-20 fs-24">
                    <view>
                        <text class="fw-600 fs-26"> 任务名称：</text>
                        <text>{{ itemData.taskName }}</text>
                    </view>
                </view>
                <view class="rowsb rowsm mt-20 fs-24">
                    <view style="width: 50%">
                        <text class="fw-600 fs-26"> 实践课程：</text>
                        <text>
                            <!-- {{ itemData.practiceType == 1 ? '劳动教育' : itemData.practiceType == 2 ? '职业素养' :
                                itemData.practiceType == 3 ? '应急安全' : itemData.practiceType == 4 ? '思政实践' : '创新创业' }} -->
                            {{ (practiceTypeList.find(v => v.value == itemData.practiceType) || {}).name }}
                        </text>
                    </view>
                    <view style="width: 50%">
                        <text class="fw-600 fs-26"> 报名状态：</text>
                        <text>{{ itemData.taskStatus == 1 ? '未开始' : itemData.taskStatus == 2 ? '进行中' : '已结束' }}</text>
                    </view>
                </view>
                <view class="ellipsis-text mt-20 fs-24">
                    <text class="fw-600 fs-26"> 任务时间：</text>
                    <text>{{ (itemData.startTime || '').slice(0, 10) }}~{{ (itemData.endTime || '').slice(0, 10) }}</text>
                </view>
                <view class="ellipsis-text mt-10 fs-24">
                    <text class="fw-600 fs-26"> 所属学期: </text>
                    <text class="pl-20">{{ itemData.semesterConfigName }}</text>
                </view>
                <view class="ellipsis-text mt-10 fs-24">
                    <text class="fw-600 fs-26"> 报名规则: </text>
                    <text class="pl-20">{{ itemData.applyCheck == 0 ? '无需审核，直接参与' : '需要审核通过后参与' }}</text>
                </view>
                <view class="ellipsis-text mt-10 fs-24">
                    <text class="fw-600 fs-26"> 人数: </text>
                    <text class="pl-20"> {{ itemData.applyPassPeoples || 0 }} / {{ itemData.peoplesNumberAstrict }}</text>
                </view>
            </uni-card>
            <uni-card>
                <view class="inforClass"> 完成情况 </view>
                <view class="rowsb rowsm mb-20 mt-20">
                    <view class="title ml-10" style="flex: 1; margin-top: 0;">学 院</view>
                    <uni-data-select v-model="limit.faceXy" :localdata="xyNameList"></uni-data-select>
                </view>
                <view class="rowsb rowsm mb-20 mt-20">
                    <view class="title ml-10" style="flex: 1; margin-top: 0;">专 业</view>
                    <uni-data-select v-model="limit.faceZy" :localdata="zyNameList" :key="componentKeyZy"></uni-data-select>
                </view>
                <view class="rowsb rowsm mb-20 mt-20">
                    <view class="title ml-10" style="flex: 1; margin-top: 0;">班 级</view>
                    <uni-data-select v-model="limit.faceBj" :localdata="bjNameList" :key="componentKeyBj"></uni-data-select>
                </view>
                <view class="rowsb rowsm mb-20 mt-20">
                    <view class="title ml-10" style="flex: 1; margin-top: 0;">状 态</view>
                    <uni-data-select v-model="limit.participationStatus" :localdata="stateList" />
                </view>
                <view class="rowsb rowsm mb-20 mt-20">
                    <view class="title ml-10" style="width: 19%; margin-top: 0;">姓 名</view>
                    <u--input style="flex: 1;margin-left: 0;" placeholder="请输入" border="surround"
                        v-model="limit.studentName" size="mini" @change="limit.pageNum = 1, getListXs()"></u--input>
                </view>
                <view class="rowsb rowsm mb-20 mt-20">
                    <view class="title ml-10" style="width: 19%; margin-top: 0;">学 号</view>
                    <u--input style="flex: 1;margin-left: 0;" placeholder="请输入" border="surround" size="mini"
                        v-model="limit.stNumber" @change="limit.pageNum = 1, getListXs()"></u--input>
                </view>
                <view class="rowsb mb-20" style="justify-content: space-between;">
                    <view style="color: #0074FF;" @click="resetQuery">重 置</view>
                </view>
                <view class="content mt-20">
                    <view class="item-warp" v-for="item in itemList" :key="item.id">
                        <view class="rows rowsm rowsb fs-24 mt-10">
                            <view>
                                <text class="fs-26 fw-600"> 姓名：</text>
                                {{ item.studentName }}
                            </view>
                            <view>
                                <text class="fs-26 fw-600"> 学号：</text>
                                {{ item.stNumber }}
                            </view>
                        </view>
                        <view class="rows rowsm rowsb fs-24 mt-10 mb-10">
                            <view>
                                <text class="fs-26 fw-600"> 学院：</text>
                                {{ item.xyName }}
                            </view>
                            <view>
                                <text class="fs-26 fw-600"> 专业：</text>
                                {{ item.zyName }}
                            </view>
                        </view>
                        <view class="rows rowsm rowsb fs-24 mb-10">
                            <view>
                                <text class="fs-26 fw-600"> 年级：</text>
                                {{ item.nj }}
                            </view>
                            <view>
                                <text class="fs-26 fw-600"> 班级：</text>
                                {{ item.bjName }}
                            </view>
                        </view>
                        <view class="rows rowsm rowsb fs-24">
                            <view>
                                <text class="fs-26 fw-600"> 报名状态：</text>
                                {{ item.participationStatus == 0 ? '未报名' :
                                    item.applyCheck === 1 && item.participationStatus == 1 ? '未审核' :
                                        item.participationStatus == 2 ? '已通过' :
                                            item.applyCheck === 1 && item.participationStatus == 3 ? '已驳回' :
                                                '' }}
                            </view>
                            <view v-if="item.applyTime">
                                <text class="fs-26 fw-600"> 报名时间：</text>
                                {{ (item.applyTime || '').slice(0, 16) }}
                            </view>
                        </view>
                    </view>
                    <view v-if="itemList.length == 0" class="notYet">
                        暂无数据
                    </view>
                </view>
            </uni-card>
        </view>
    </view>
</template>
  
<script>
export default {
    data() {
        return {
            itemData: {},
            total: 0,
            limit: {
                pageNum: 1,
                pageSize: 10,
            },
            componentKeyZy: 0,
            componentKeyBj: 0,
            itemList: [],
            xyNameList: [],
            zyNameList: [],
            bjNameList: [],
            stateList: [],
            practiceTypeList: [],
        };
    },
    watch: {
        'limit.faceXy': {
            handler(newValue, oldValue) {
                if (!newValue && oldValue === undefined) return
                this.limit.faceZy = null;
                this.limit.faceBj = null;
                this.limit.pageNum = 1;
                this.getZyList();
                this.getBjList();
                this.getListXs();
            }
        },
        'limit.faceZy': {
            handler(newValue, oldValue) {
                if (!newValue && oldValue === undefined) return
                this.limit.faceBj = null;
                this.limit.pageNum = 1;
                this.getBjList();
                this.getListXs();
            }
        },
        'limit.faceBj': {
            handler(newValue, oldValue) {
                if (!newValue && oldValue === undefined) return
                this.limit.pageNum = 1;
                this.getListXs();
            }
        },
        'limit.participationStatus': {
            handler(newValue, oldValue) {
                if (!newValue && oldValue === undefined) return
                this.limit.pageNum = 1;
                this.getListXs();
            }
        },
    },
    onLoad(e) {
        this.itemData = JSON.parse(e.item);
        this.getTypeCongfigList();
        this.stateList = this.itemData.applyCheck == 0 ? [{ value: -1, text: '未报名' }, { value: 2, text: '已通过' }] : [{ value: -1, text: '未报名' }, { value: 1, text: '未审核' }, { value: 2, text: '审核通过' }, { value: 3, text: '已驳回' }];
        this.getListXs();
        this.getListProxy();
        this.getZyList();
        this.getBjList();
    },
    // 下拉到底部后加载新数据
    onReachBottom() {
        if (this.itemList.length < this.total) {
            this.limit.pageNum++;
            this.getListXs();
        }
    },
    methods: {
        getTypeCongfigList() {
            this.$tools.axiosFromToken('GET', 'project/practice/type/config/list?pageNum=1&pageSize=50', {}, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                res.rows.forEach(item => {
                    this.practiceTypeList.push({ name: item.name, value: item.id })
                })
            })
        },
        getListXs() {
            const data = {
                pageNum: this.limit.pageNum,
                pageSize: this.limit.pageSize,
                xyId: this.limit.faceXy ? this.limit.faceXy : null,
                zyId: this.limit.faceZy ? this.limit.faceZy : null,
                bjId: this.limit.faceBj ? this.limit.faceBj : null,
                studentName: this.limit.studentName ? this.limit.studentName : null,
                stNumber: this.limit.stNumber ? this.limit.stNumber : null,
                participationStatus: this.limit.participationStatus > 0 ? this.limit.participationStatus : this.limit.participationStatus == -1 ? 0 : null,
            };
            this.$tools.axiosFromToken('GET', `project/apply/applyInfo?&id=${this.itemData.id}&pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`, { ...data }, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                this.total = res.total;
                if (this.limit.pageNum == 1) {
                    this.itemList = [];
                    this.itemList = res.rows;
                } else {
                    this.itemList = [...this.itemList, ...res.rows];
                }
            })
        },
        // 查询学院
        getListProxy() {
            let xyIds = this.itemData.faceXy.split(',');
            xyIds.forEach(v => {
                v = String(v);
            });
            this.$tools.axiosFromToken('GET', 'project/proxy/listTotalForFace', { xyIds }, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                res.rows.forEach(v => {
                    this.xyNameList.push({ text: v.name, value: v.id })
                })
            })
        },
        getZyList() {
            this.zyNameList = [];
            let xyIds = this.itemData.faceXy.split(',');
            xyIds.forEach(v => {
                v = String(v);
            });
            let zyIds = this.itemData.faceZy.split(',');
            zyIds.forEach(v => {
                v = String(v);
            });
            const faceXys = this.limit.faceXy ? [this.limit.faceXy] : xyIds;
            const faceZys = this.limit.facezy ? [this.limit.faceZy] : zyIds;
            this.$tools.axiosFromToken('post', 'project/prozy/listTotalForPost', { xyIds: faceXys, zyIds: faceZys }, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                this.zyNameList = res.rows.map(item => ({ text: item.name, value: item.id, }));
                this.componentKeyZy = new Date().getTime();
            })
        },
        getBjList() {
            this.bjNameList = [];
            let bjIds = this.itemData.faceBj.split(',');
            bjIds.forEach(v => {
                v = String(v);
            });

            const faceXys = !this.limit.faceXy ? null : [this.limit.faceXy];
            const faceZys = !this.limit.faceZy ? null : [this.limit.faceZy];

            this.$tools.axiosFromToken('post', 'project/probj/listTotalForPost', { xyIds: faceXys, zyIds: faceZys, bjIds }, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                this.bjNameList = res.rows.map(item => ({ text: item.name, value: item.id, }));
                this.componentKeyBj = new Date().getTime();
            })
        },

        resetQuery() {
            this.limit = {
                pageNum: 1,
                pageSize: 10,
            };
            this.getListXs();
        },
    }
}
</script>
  
<style lang="scss">
page {
    background-color: #f4f5f7;
    padding-bottom: 10px;
}


::v-deep .uni-card {
    margin-left: 5px !important;
    margin-right: 5px !important;
    overflow: visible;
}

::v-deep .uni-card__content {
    color: #000 !important;
}

.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    align-items: center;
}

.item-warp {
    padding: 24rpx;
    width: 100%;
    background: #f4f5f7;
    border-radius: 10px;
    margin-bottom: 18rpx;
}

.content-warp {
    margin-top: 10px;
    font-size: 24rpx;

    .txt-warp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .title {
            font-size: 30rpx;
            font-weight: bold;
        }
    }
}

.inforClass {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.inforClass::before {
    content: '';
    width: 5px;
    height: 20px;
    background-color: #007AFF;
    margin-right: 5px;
    display: inline-block;
}

::v-deep .segmented-control__item--text {
    border-bottom-width: 0 !important;
}

::v-deep .segmented-control__item {
    border: 1px solid #dfe4ed !important;
    border-right: 0 !important;
}

::v-deep .segmented-control__item:last-child {
    border-right: 1px solid #dfe4ed !important;
}

::v-deep .uni-stat__select {
    width: 80%;
    padding: 0 !important;

    .uni-select__input-placeholder {
        color: #c0c4cc !important;
    }

    view {
        width: 100%;
    }
}
</style>
  